<template>
	<view class="page">
		<scroll-view scroll-y class="safeSpacing scroll-view">
			<view class="form-box">
				<card title="员工信息">
					<u--form labelPosition="left" :model="model" :rules="rules" :labelStyle="labelStyle" ref="form1"
						class="form-table">
						<u-form-item label="工号" class="form-item" labelWidth="230rpx" borderBottom ref="item0">
							<text>{{ userjobnum }}</text>
						</u-form-item>
						<u-form-item label="姓名" class="form-item" labelWidth="230rpx" borderBottom ref="item1">
							<text>{{ username }}</text>
						</u-form-item>
						<u-form-item label="来访开始日期" class="form-item" labelWidth="230rpx" prop="valuedate" borderBottom
							@click="showdate = true" ref="item2">
							<u--input v-model="datetime" disabled disabledColor="#ffffff" placeholder="请选择日期"
								border="none" fontSize="30rpx"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
							<u-datetime-picker :show="showdate" v-model="valuedate" mode="date"
								@confirm="selectDate($event, 'st')" @cancel="showdate = false"></u-datetime-picker>
						</u-form-item>
						<u-form-item label="来访开始时间" class="form-item" labelWidth="230rpx" prop="valuetime" borderBottom
							@click="showtime = true" ref="item3">
							<u--input v-model="valuetime" disabled disabledColor="#ffffff" placeholder="请选择时间"
								border="none" fontSize="30rpx"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
							<u-datetime-picker :show="showtime" v-model="valuetime" mode="time"
								@confirm="selectTime('st')" @cancel="showtime = false"></u-datetime-picker>
						</u-form-item>

						<u-form-item label="来访结束日期" class="form-item" labelWidth="230rpx" prop="ed_valuedate"
							borderBottom @click="ed_showdate = true" ref="item2">
							<u--input v-model="ed_datetime" disabled disabledColor="#ffffff" placeholder="请选择日期"
								border="none" fontSize="30rpx"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
							<u-datetime-picker :show="ed_showdate" v-model="ed_valuedate" mode="date"
								@confirm="selectDate($event, 'ed')" @cancel="ed_showdate = false"></u-datetime-picker>
						</u-form-item>
						<u-form-item label="来访结束时间" class="form-item" labelWidth="230rpx" prop="ed_valuetime"
							borderBottom @click="ed_showtime = true" ref="item3">
							<u--input v-model="ed_valuetime" disabled disabledColor="#ffffff" placeholder="请选择时间"
								border="none" fontSize="30rpx"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
							<u-datetime-picker :show="ed_showtime" v-model="ed_valuetime" mode="time"
								@confirm="selectTime('ed')" @cancel="ed_showtime = false"></u-datetime-picker>
						</u-form-item>
					</u--form>
				</card>
				
				<card title="访客信息" :showAdd="true" @addclick="addVisitor">
					<u--form labelPosition="left" :labelStyle="labelStyle" v-for="(item, index) in visitorList"
						:key="index" :model="item" :rules="rules" ref="form2" class="form-table">
						<u-form-item label="姓名" prop="name" class="form-item" labelWidth="180rpx" borderBottom
							ref="item0">
							<u--input v-model="item.name" placeholder="请输入姓名" :disabled="index < visitorList.length - 1"
								clearable type="text" fontSize="30rpx"></u--input>
							<u-icon slot="right" :name="imagesYqgjUrl + 'del.png'" width="40rpx" height="40rpx"
								v-if="index < visitorList.length - 1" @click="removeModel(index)"></u-icon>
						</u-form-item>
						<u-form-item label="电话" prop="phone" class="form-item" labelWidth="180rpx" borderBottom
							ref="item1">
							<u--input v-model="item.phone" placeholder="请输入电话"
								:disabled="index < visitorList.length - 1" clearable type="text" fontSize="30rpx">
							</u--input>
							<u-icon slot="right" :name="imagesYqgjUrl + 'del.png'" width="40rpx" height="40rpx"
								v-if="index < visitorList.length - 1" @click="removeModel(index)"></u-icon>
						</u-form-item>
					</u--form>
				</card>
			</view>
		</scroll-view>
		<view class="btn flexC-Cen" @click="formSubmit">发送链接</view>
	</view>
</template>

<script>
	import config from '@/configs/index.js'
	import {
		isMobile
	} from '@/utils/check.js';

	export default {
		data() {
			return {
				imagesYqgjUrl: config.IMAGES_URL_YQGJ + 'visitor/',
				username: '李猛',
				userjobnum: '0232398',
				showdate: false,
				showtime: false,
				datetime: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
				valuedate: Number(new Date()),
				valuetime: uni.$u.timeFormat(new Date(), 'hh:00'),

				ed_showdate: false,
				ed_showtime: false,
				ed_datetime: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
				ed_valuedate: Number(new Date()),
				ed_valuetime: '23:59',

				labelStyle: {
					fontSize: '30rpx'
				},
				visitorList: [{
					name: '测试访客',
					phone: '15222222222'
				}],
				rules: {
					name: [{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}],
					phone: [{
							type: 'string',
							required: true,
							message: '请填写电话',
							trigger: ['blur', 'change']
						},
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return isMobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur']
						}
					]
				},
				model: {
					userInfo: {
						name: 'uView UI'
					}
				},

				form: {
					description: '',
					name: '',
					phone: ''
				},
			};
		},

		methods: {
			selectDate(e, type) {
				const timeFormat = uni.$u.timeFormat,
					toast = uni.$u.toast;
				if (type == 'ed') {
					this.ed_datetime = timeFormat(e.value, 'yyyy-mm-dd');
					this.ed_showdate = false;
				} else {
					this.datetime = timeFormat(e.value, 'yyyy-mm-dd');
					this.showdate = false;
				}
			},
			selectTime(type) {
				if (type == 'ed') {
					this.ed_showtime = false;
				} else {
					this.showtime = false;
				}
			},
			removeModel(index) {
				this.visitorList.splice(index, 1);
			},
			addVisitor() {
				//获取最后一个元素
				let item = this.visitorList[this.visitorList.length - 1];
				if (!item.name || !item.phone) {
					uni.showToast({
						title: '访客姓名和手机号不能为空',
						icon: 'error',
						duration: 500
					});
					return;
				}
				if (!isMobile(item.phone)) {
					uni.showToast({
						title: '手机号码不正确',
						icon: 'error',
						duration: 500
					});
					return;
				}
				if (this.visitorList.length > 1) {
					for (let i = 0; i < this.visitorList.length - 1; i++) {
						let olditem = this.visitorList[i];
						if (olditem.phone === item.phone) {
							uni.showToast({
								title: '访客手机号不能重复',
								icon: 'error',
								duration: 500
							});
							return;
						}
					}
				}

				this.visitorList.push({
					name: '',
					phone: ''
				});
			},
			getDate(strDate) {
				var st = strDate;
				var a = st.split(' ');
				var b = a[0].split('-');
				var c = a[1].split(':');
				var date = new Date(b[0], b[1], b[2], c[0], c[1], c[2]);
				return date;
			},
			formSubmit() {
				//检查日期
				let stDate = this.getDate(this.datetime + ' ' + this.valuetime + ':00');
				let edDate = this.getDate(this.ed_datetime + ' ' + this.ed_valuetime + ':59');
				if (stDate.getTime() > edDate.getTime()) {
					uni.showToast({
						title: '结束日期必须大于开始日期',
						icon: 'error',
						duration: 500
					});
					return;
				}

				let visitorInfos = [];
				this.visitorList.forEach(item => {
					if (item.name && item.phone) {
						visitorInfos.push(item);
					}
				});
				if (visitorInfos.length < 1) {
					uni.showToast({
						title: '请填写访客姓名及电话',
						icon: 'error',
						duration: 500
					});
					return;
				}
				let item = this.visitorList[this.visitorList.length - 1];
				if (!isMobile(item.phone)) {
					uni.showToast({
						title: '手机号码不正确',
						icon: 'error',
						duration: 500
					});
					return;
				}
				if (this.visitorList.length > 1) {
					for (let i = 0; i < this.visitorList.length - 1; i++) {
						let olditem = this.visitorList[i];
						if (olditem.phone === item.phone) {
							uni.showToast({
								title: '访客手机号不能重复',
								icon: 'error',
								duration: 500
							});
							return;
						}
					}
				}
				const list = uni.getStorageSync("visitorUserList")
				list.push({
					visitorName: this.visitorList[0].name,
					phone: this.visitorList[0].phone,
					startTime: this.datetime,
					endTime: this.valuetime + '-' + this.ed_valuetime,
				})
				
				uni.setStorageSync("visitorUserList", list)
				uni.showToast({
					title: '发送邀请成功',
					icon: 'none',
					duration: 500,
					complete: () => {
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/visitor/index'
							});
						}, 300);
					}
				});
			},
		}
	};
</script>

<style scoped lang="scss">
	.page {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;

		.scroll-view {
			width: 100%;
			height: calc(100% - 100rpx);

			.form-box {
				width: 100%;
				height: 100%;
				margin: 20rpx 0;
				font-size: 38rpx;

				.form-table {
					width: 100%;
					font-size: 34rpx;
				}

				.form-item {
					font-size: 30rpx;
				}
			}
		}

		.btn {
			width: 530rpx;
			height: 72rpx;
			margin: 0 auto;
			border-radius: 8rpx;
			color: #ffffff;
			background-color: rgba(65, 174, 104, 1);
			font-size: 32rpx;
		}
	}

	.my-picker {
		width: 100%;
		height: 500rpx;
		background-color: #fff;

		.item {
			text-align: center;
			line-height: 50px;

		}
	}
</style>
<style>
	.u-border {
		border: none;
	}
</style>